<template>
    <div class="container">
        <h4>折线图</h4>
        <div class="middleBox">
            <ALine :data="LineData1.data" :settings="LineData1.settings"></ALine>
        </div>
        <div class="middleBox">
            <ALine
                    :data="LineData2.data"
                    :settings="LineData2.settings"
                    :background-color="LineData2.backgroundColor"
                    :colors="LineData2.colors"
                    :loading="LineData2.loading"
                    :data-empty="LineData2.dataEmpty"
                    :title="LineData2.title"
            ></ALine>
        </div>

        <h4>饼状图</h4>
        <div class="middleBox">
            <APie
                    :data="PieData1.data"
                    :settings="PieData1.settings"
            ></APie>
        </div>

        <div class="middleBox">
            <APie
                    :data="PieData2.data"
                    :settings="PieData2.settings"
                    :colors="PieData2.colors"
            ></APie>
        </div>

        <div class="middleBox">
            <ARing
                    :data="PieData3.data"
                    :settings="PieData3.settings"
                    :colors="PieData3.colors"
            ></ARing>
        </div>

        <h4>柱状图</h4>
        <div class="largeBox">
            <ABar  :data="barData1.data"
                   :settings="barData1.settings"
            ></ABar>
        </div>

        <div class="largeBox">
            <ABar  :data="barData2.data"
                   :settings="barData2.settings"
                   :colors="barData2.colors"
            ></ABar>
        </div>

        <div class="largeBox">
            <AStackBar  :data="barData3.data"
                   :settings="barData3.settings"
                   :colors="barData3.colors"
            ></AStackBar>
        </div>

        <h4>仪表盘</h4>
        <div class="largeBox">
            <AGuage
                    :data="guageData1.data"
                    :settings="guageData1.settings"
                    :colors="guageData1.colors"
            ></AGuage>
        </div>

        <div class="largeBox">
            <AGuage
                    :data="guageData2.data"
                    :settings="guageData2.settings"
                    :background-color="guageData2.backgroundColor"
                    :log="true"
            ></AGuage>
        </div>

        <h4>散点图</h4>
        <div class="middleBox">
            <AScatter  :data="scatterData1.data"
                        :settings="scatterData1.settings"
                        :colors="scatterData1.colors"
            ></AScatter>
        </div>
    </div>
</template>
<script>
    import {basicLineData1, basicLineData2} from './data/line';
    import {pieData1, pieData2, pieData3} from "./data/pie";
    import {barData1, barData2, barData3} from "./data/bar";
    import {guageData1,guageData2} from "./data/guage";
    import {scatterData1} from "./data/scatter";

    export default {
       name: 'app',

       data() {
           return {
               LineData1: basicLineData1,
               LineData2: basicLineData2,
               PieData1: pieData1,
               PieData2: pieData2,
               PieData3: pieData3,
               barData1: barData1,
               barData2: barData2,
               barData3: barData3,
               guageData1: guageData1,
               guageData2: guageData2,
               scatterData1: scatterData1
           };
       },
   }
</script>
<style lang="scss" scoped>
.smallBox{
    width: 300px;
    height: 200px;
}

.middleBox{
    width: 450px;
    height: 300px;
}

.largeBox{
    width: 800px;
    height: 620px;
}
</style>
